<template>
    <div class="dashboard-container">
        <my-search :fields="fieldsList" :baseNumber="6" @onSearch="searchForm" @onReset="resetForm" :selectIsAddAll="false" />
        <div class="btn">
        </div>
        <div class="table-list">
            <Echart v-loading="loading" :id="myEchart" :option="option" :height="$store.state.app.windowHeight - 200+'px'" :width="'100%'" />
        </div>

    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Echart from '@/components/echart'
import { queryList } from '@/api/cxtj/qycwbbfx'
import {
    queryDetailList
} from '@/api/cxtj/zdsygl'
export default {
    name: 'Qycwbbfx',
    components: {
        Echart
    },
    data() {
        return {
            loading: false,
            fieldsList: [
                {
                    label: '纳税人名称',
                    field: 'qymc',
                   type: 'autocomplete',
                    value: '',
                    options: []
                },
                {
                    label: '纳税人识别号',
                    field: 'nsrsbh',
                    type: 'text',
                    value: ''
                },
                {
                    label: '年度',
                    field: 'nd',
                    type: 'year', // year
                    value: ''
                },
                {
                    field: 'nllx',
                    label: '能力类型',
                    type: 'select', // select
                    multiple: false,
                    value: '',
                    selectIsAddAll: false,
                    options: [
                        { label: '盈利能力', value: '盈利能力' },
                        { label: '营运能力', value: '营运能力' },
                        { label: '偿债能力', value: '偿债能力' },
                        { label: '发展能力', value: '发展能力' },
                    ],
                    change: val => {
                        this.changeOption(val)
                    }
                },
                {
                    field: 'zbx',
                    label: '指标项',
                    type: 'select', // select
                    multiple: false,
                    selectIsAddAll: false,
                    value: '',
                    options: [
                        { label: '销售净利率', value: '销售净利率' },
                        { label: '成本费用利润率', value: '成本费用利润率' },
                        { label: '营业利润率', value: '营业利润率' },
                        { label: '资产净利率', value: '资产净利率' },
                        { label: '权益净利率', value: '权益净利率' },
                        { label: '盈利现金比率', value: '盈利现金比率' },
                    ],
                    change: val => { }
                }
            ],

            tableDatas: [],
            queryObj: {
                qymc: '', //公司名称
                nsrsbh: '',
                nd: '',
                nllx: '',
                zbx: '',

            },
            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },

                legend: {
                    data: ['金额', '增长率']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['第一季度', '第二季度', '第三季度', '第四季度'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '金额',

                        axisLabel: {
                            formatter: '{value} 万元'
                        }
                    },
                    {
                        type: 'value',
                        name: '增长率',
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    {
                        name: '金额',
                        type: 'bar',
                        barWidth: '30',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 万元';
                            }
                        },
                        data: []
                    },

                    {
                        name: '增长率',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' %';
                            }
                        },
                        data: []
                    }
                ]
                , myEchart: ''

            },
            myEchart: '',
            // 营运能力（应收账收入比、存货周转率、流动资产周转率、非流动资产周转率、净营运资本周转率、总资产周转率）、
            // 发展能力（股东权益增长率、净利润增长率、资产增长率、营业利润增长率、销售增长率）
            zbx1: [
                { label: '销售净利率', value: '销售净利率' },
                { label: '成本费用利润率', value: '成本费用利润率' },
                { label: '资产净利率', value: '资产净利率' },
                { label: '盈利现金比率', value: '盈利现金比率' },
                { label: '营业利润率', value: '营业利润率' },
                { label: '权益净利率', value: '权益净利率' },
            ],
            zbx2: [
                { label: '净营利资本', value: '净营利资本' },
                { label: '流动比率', value: '流动比率' },
                { label: '速动比率', value: '速动比率' },
                { label: '现金比率', value: '现金比率' },
                { label: '现金货币比率', value: '现金货币比率' },
                { label: '资产负债率', value: '资产负债率' },
            ],
            zbx3: [
                { label: '应收账收入比', value: '应收账收入比' },
                { label: '存货周转率', value: '存货周转率' },
                { label: '流动资产周转率', value: '流动资产周转率' },
                { label: '非流动资产周转率', value: '非流动资产周转率' },
                { label: '净营运资本周转率', value: '净营运资本周转率' },
                { label: '总资产周转率', value: '总资产周转率' },
            ],
            zbx4: [
                { label: '股东权益增长率', value: '股东权益增长率' },
                { label: '净利润增长率', value: '净利润增长率' },
                { label: '资产增长率', value: '资产增长率' },
                { label: '营业利润增长率', value: '营业利润增长率' },
                { label: '销售增长率', value: '销售增长率' },
            ],
            searchTxt: ''
        }
    },
    computed: {
        ...mapGetters([
            'name'
        ])
    },
    watch: {

        fieldsList: {
            handler(newOption, oldOption) {
                this.searchTxt = newOption[0].value
            },
            deep: true
        },
        searchTxt(newOption, oldOption) {
            console.log('1', newOption, oldOption)
            this.getQueryDetailList(newOption)
        }
    },
    mounted() {
    },
    methods: {
        getQueryDetailList(nsrmc) {
            queryDetailList({ nsrmc: nsrmc }).then(res => {
                if (res.code == 200) {
                    this.fieldsList[0].options = res.data.records.map(item => {
                        return { value: item.NSRMC, label: item.NSRMC }
                    })
                }
                console.log(this.fieldsList[0].options)
            })
        },
        initChart() {
        },
        changeOption(val) {
            if (val == '盈利能力') {
                this.fieldsList[4].options = this.zbx1
            }
            if (val == '营运能力') {
                this.fieldsList[4].options = this.zbx2
            }
            if (val == '偿债能力') {
                this.fieldsList[4].options = this.zbx3
            }
            if (val == '发展能力') {
                this.fieldsList[4].options = this.zbx4
            }
        },
        searchForm(params) {
            console.log(params, '查询条件');
            this.queryObj.qymc = params.qymc//公司名称
            this.queryObj.nsrsbh = params.nsrsbh
            this.queryObj.nd = params.nd
            this.queryObj.nllx = params.nllx
            this.queryObj.zbx = params.zbx
            this.getTableData();
        },
        resetForm() {
            for (let key in this.queryObj) {
                if (key == 'pageNo') {
                    this.queryObj[key] = 1;
                } else if (key == 'pageSize') {
                    this.queryObj[key] = 20;
                } else {
                    this.queryObj[key] = '';
                }
            }
            this.option.series[0].data = []
            this.option.series[1].data = []
        },
        getTableData() {
            if (this.queryObj.qymc == '' || this.queryObj.qymc == null) {
                this.$message.error('请输入纳税人名称或纳税人识别号！')
                return false;
            }
            if (this.queryObj.nd == '' || this.queryObj.nd == null) {
                this.$message.error('请选择年度！')
                return false;
            }
            if (this.queryObj.nllx == '' || this.queryObj.nllx == null) {
                this.$message.error('请选择能力类型')
                return false;
            }
            if (this.queryObj.zbx == '' || this.queryObj.zbx == null) {
                this.$message.error('请选择指标项')
                return false;
            }
            this.loading = true
            queryList(this.queryObj).then(res => {
                this.loading = false
                if (res.code == 200) {
                    let zzlArr = []
                    let jeArr = []
                    let month = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']



                    for (let i = 0; i < month.length; i++)
                        for (let j in res.data.zzl) {
                            if (j == month[i]) {
                                console.log(res.data.zzl[j])
                                if (res.data.zzl[j]) {
                                    zzlArr.push(res.data.zzl[j])
                                } else {
                                    zzlArr.push(0)
                                }

                            }

                        }
                    for (let i = 0; i < month.length; i++)
                        for (let j in res.data.je) {
                            if (j == month[i]) {
                                if (res.data.je[j]) {
                                    jeArr.push(res.data.je[j])

                                } else {
                                    jeArr.push(0)
                                }
                            }

                        }

                    this.option.series[0].data = jeArr
                    this.option.series[1].data = zzlArr
                }
            })
        },

    }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 8px;

    .btn {
        padding: 8px 8px 8px 0;
    }
}
</style>
